<template>
  <div v-if="isSuperAdmin" class="container">
    <el-row :gutter="30" class="statistics-panel-group">
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-wechat">
            <svg-icon icon-class="wechat" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">关注总人数</div>
            <count-to :start-val="0" :end-val="attentionNum" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-peoples">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">注册医生数</div>
            <count-to :start-val="0" :end-val="registerNum" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-proportion">
            <svg-icon icon-class="proportion" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">医生占比</div>
            <count-to :start-val="0" :end-val="doctorRatio" :duration="3000" class="card-panel-num" />
            %
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-register">
            <svg-icon icon-class="register" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">本月新增注册</div>
            <count-to :start-val="0" :end-val="monthlyRegNum" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-doctor">
            <svg-icon icon-class="doctor" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">本月新增注册医生</div>
            <count-to :start-val="0" :end-val="doctorNewNum" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-proportion">
            <svg-icon icon-class="proportion" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">本月新增医生占比</div>
            <count-to :start-val="0" :end-val="doctorNewlyRatio" :duration="3000" class="card-panel-num" />
            %
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-card class="box-card">
          <div slot="header" class="card-header clearfix">
            <h5 class="title pull-left">用户日报表</h5>
          </div>
          <daily-chart
            v-loading="_.isEmpty(dailyStatistics)"
            :chart-data="dailyStatistics"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="30" class="mt30">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-card class="box-card">
          <div slot="header" class="card-header clearfix">
            <h5 class="title pull-left">用户月报表</h5>
          </div>
          <monthly-chart
            v-loading="_.isEmpty(monthlyStatistics)"
            :chart-data="monthlyStatistics"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div v-else class="container">
    <div class="dashboard-title">欢迎来到医时空后台管理系统</div>
  </div>
</template>

<script>
import {
  getDailyStatistics,
  getMonthlyStatistics
} from '@/api/statistics'
import CountTo from 'vue-count-to'
import DailyChart from '@/views/charts/components/DailyChart'
import MonthlyChart from '@/views/charts/components/MonthlyChart'
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: {
    CountTo,
    DailyChart,
    MonthlyChart
  },
  data() {
    return {
      attentionNum: 0,
      doctorNewNum: 0,
      monthlyRegNum: 0,
      registerNum: 0,
      doctorNewlyRatio: 0,
      doctorRatio: 0,
      dailyStatistics: {},
      monthlyStatistics: {},
      isSuperAdmin: true
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    if (!this.roles.includes('SuperAdmin')) {
      this.isSuperAdmin = false
    } else {
      this.isSuperAdmin = true
      this.fetchDailyData()
      this.fetchMonthlyData()
    }
  },
  methods: {
    fetchDailyData() {
      getDailyStatistics().then(response => {
        // console.log(response)
        const resData = response.data
        const statisticsData = {
          day: this._.map(resData.list, 'day'),
          accumulated: this._.map(resData.list, 'accumulated'),
          approve: this._.map(resData.list, 'approve'),
          newDoctor: this._.map(resData.list, 'newDoctor'),
          unfollow: this._.map(resData.list, 'unfollow')
        }
        this.attentionNum = resData.attentionNum
        this.doctorNewNum = resData.doctorNewlyRegister
        this.monthlyRegNum = resData.monthRegister
        this.registerNum = resData.registerNum
        this.doctorNewlyRatio = parseFloat(resData.doctorNewlyRatio) * 100
        this.doctorRatio = parseFloat(resData.doctorRatio) * 100
        this.dailyStatistics = statisticsData
        // console.log(statisticsData)
      }).catch(err => {
        console.log(err)
      })
    },
    fetchMonthlyData() {
      getMonthlyStatistics().then(response => {
        // console.log(response)
        const resData = response.data
        const statisticsData = {
          yearMonth: this._.map(resData.list, 'yearMonth'),
          approveNum: this._.map(resData.list, 'approveNum'),
          noDoctor: this._.map(resData.list, 'noDoctor'),
          noTargetNum: this._.map(resData.list, 'noTargetNum'),
          urqNum: this._.map(resData.list, 'urqNum'),
          targetNum: this._.map(resData.list, 'targetNum')
        }
        this.monthlyStatistics = statisticsData
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 40px;
  .dashboard-title {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
